<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div class="rule-box">
    <!-- 首页 -->

    <!-- 返回 -->
    <div v-if="$route.query.name || $route.query.id" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <div class="app-container hk-flex-column">
      <div class="app-container-bg">
        <TypeItem :data="assetsArr" title="画像" @handleClick="handleClick" />
      </div>
      <div class="hk-container">
        <!-- 查询相关 -->
        <div class="search-msg">
          <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
            <el-form-item label="关键字">
              <el-input
                v-model="queryParams.keyword"
                size="small"
                placeholder="请输入设备名称/IP"
                clearable
                style="width: 320px;"
                maxlength="20"
                @keyup.enter.native="handleSearch"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
              >查询</el-button>
              <el-button
                size="small"
                icon="el-icon-refresh-right"
                style="margin: 0 40px 0 10px"
                @click="handleReset"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 搜索列表区域 -->
        <div class="search-list">
          <HkTable
            :loading="loading"
            :table-data="attrList"
            :table-columns="tableLabelLists"
            :query-params="queryParams"
            :operate="true"
            :show-index="true"
            :total="total"
            :table-height="80"
            @changePage="getList"
          >
            <template #operate="scope">
              <el-button size="mini" type="text" @click="enterIndex(scope.row)">进入画像</el-button>
            </template>
          </HkTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TypeItem from '@/components/Common/TypeItem'
import { mapMutations, mapState } from 'vuex'
import { tableList, tag } from '@/api/dispose/userPortrait'
import HkTable from '@/components/Hk-Table'
export default {
  name: 'PortraySearch',
  components: {
    HkTable,
    TypeItem
  },
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next()
  },
  // computed: {
  //   ...mapState({
  //     attrList: state => state.portrait.attrList,
  //     historyArr: state => state.portrait.historyArr.slice().reverse(),
  //     total: state => state.portrait.listTotal || 0,
  //     queryParams: state => state.portrait.queryParams || { size: 10, current: 1 },
  //     searchObj: state => state.portrait.searchObj
  //   })
  // },
  // eslint-disable-next-line vue/order-in-components
  data() {
    return {
      activeBtn: '设备', // 搜索框上面选择的值

      input_value: '', // 搜索框的值
      selectTime: 0, // 查询结果的时间
      // 遮罩层
      loading: false,
      // 表格树数据
      assetsArr: [],
      attrList: [],
      // 查询参数
      //  重新设置查询参数
      newQueryParams: {},
      isShrink: false,
      tableLabelLists: [
        { label: '设备名称', param: 'name', width: '200' },
        { label: 'IP地址', param: 'equipmentIp', width: '200' },
        { label: 'MAC地址', param: 'equipmentMac' },
        { label: '责任人名称', param: 'equipmentUserName', width: '120' },
        { label: '所属单位', param: 'equipmentOrgIdDictLable' }
      ],
      total: 0,
      queryParams: {
        current: 1,
        size: 10,
        keyword: null,
        assetsType: null
      }
    }
  },
  activated() {
    this.getTags()
    this.getList()
  },
  methods: {
    ...mapMutations([
      'portrait/changeAssetsObj'
    ]),
    // 筛选条件
    handleSearch() {
      this.queryParams.current = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.queryParams.current = 1
      this.queryParams.keyword = ''
      this.getList()
    },
    /** 查询部门列表 */
    getList() {
      this.newQueryParams = { ...this.queryParams, scrollToTop: true }
      this.loading = true
      tableList(this.newQueryParams).then(res => {
        this.attrList = res.list
        this.total = res.total
        this.loading = false
      })
    },
    enterIndex(i) {
      this['portrait/changeAssetsObj'](i)
      this.$router.push(window.prefix + '/dispose/entityPortrait')
    },
    getTags() {
      tag().then(res => {
        this.assetsArr = res.map(item => {
          return {
            name: item.itemLabel,
            value: item.itemVale,
            num: item.total
          }
        })
      })
    },
    // 隐藏界面1
    hiddenTab() {
      this.input_value = ''
      const path = this.$route.path
      this.$router.replace(path).catch(err => err)
      // this.$router.replace(path).catch((err) => err);
    },

    // 清空历史记录
    clearHistory() {
      this['portrait/clearHistory']()
    },
    // 收缩按钮
    handleShrink() {
      this.isShrink = !this.isShrink
    },
    //  切换tabs
    handleClick(index, current) {
      if (index == 0) {
        this.queryParams.assetsType = null
      } else {
        this.queryParams.assetsType = current.value
      }
      this.getList()
    }
  },
  // eslint-disable-next-line vue/order-in-components
  mounted() {
    this.getTags()
    this.getList()
  },
  // eslint-disable-next-line vue/order-in-components
  destroyed() {
    this.showtab1 = false
    // let path = this.$route.path;
    // this.$router.replace(path).catch((err) => err);
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table{
  margin-top:0 !important;
  overflow: hidden !important;
}
::v-deep .el-input-group__append .el-button{
  margin:0 !important;
}
.targetTable{
  overflow:hidden !important;
}
#app.dark-theme .title {
  color: #fff;
}
.app-container {
  padding:0 !important;
  width:100%;
  overflow: hidden !important;
  background:#eef0f5 !important;
  .hk-container {
    background: #fff;
    width:100% !important;
    // height: 100%;
    padding: 20px;
    overflow: hidden;
    flex:1;
    display: flex;
    flex-direction: column;
    .search-list {
      width: 100%;
      flex: 1;
      overflow: hidden;
      .targetTable {
        flex:1;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
    }
    .targetTable {
      flex: 1;
      overflow-y: hidden;
    }
  }
}
.port-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: transparent;

  .c_upper {
    display: flex;
    width: 100%;
    height: 100%;
    //flex-direction: column;
    //align-items: center;
    .c_upper_left {
      flex: 1;
      text-align: center;
      .title {
        font-size: 18px;
        font-weight: 900;
      }
    }
    .c_upper_right {
      width: 16%;
      padding: 0 10px;
    }
    padding-top: 90px;
    // 画像查询部分
    & > p {
      margin-top: 10px;
      margin-bottom: 60px;
      width: 100%;
      display: flex;
      flex-direction: column;
      text-align: center;
      line-height: 36px;
      font-size: 24px;
      font-weight: 700;
    }
  }

  // 搜索区域
  .search-input {
    width: 700px;
    margin: 0 auto;
    .btn-group {
      position: relative;
      z-index: 2;

      .btn {
        display: inline-block;
        padding: 9px 0;
        width: 80px;
        height: 40px;
        background: #ffffff;
        border: 1px solid rgba(229, 229, 229, 1);
        border-radius: 4px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;

        &:nth-of-type(2) {
          margin: 0 10px;
        }

        &.active {
          border-color: #4b6eef;
          color: #ffffff;
          background-color: #4b6eef;
        }
      }
    }

    .el-input {
      width: 700px;
      outline: none;
      margin-top: 10px;
      &::v-deep .el-input-group__prepend {
        width: 100px !important;
      }
      &::v-deep .el-input__inner {
        border-color: #c8cbcd;
        height: 48px;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
      }

      &::v-deep .el-input-group__append {
        border: 0;
      }

      &::v-deep .el-button {
        height: 48px;
        color: #fff;
        background: #4b6eef;
        border-radius: 0px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
  }
  .tag-left-content {
    width: 700px;
    margin: 0 auto;
    text-align: left;
    margin-top: 20px;
    .el-button{
      font-size: 14px;
    }
  }
  .tag-content {
    //margin-top: 40px;
    & > .el-button {
      margin-right: 15px;
    }
    .tag-history-list {
      line-height: 30px;
      cursor: pointer;
      color: #666;
      font-size: 14px;
    }
  }
  .arrow {
    display: flex;
    border-right: 1px solid #ebebeb;
    align-items: center;
    span {
      cursor: pointer;
      display: inline-block;
      height: 70px;
      border: 1px solid #ebebeb;
      border-right: 0;
      line-height: 70px;
      i {
        color: #ebebeb;
      }
    }
  }

  // 搜索列表

}
.el-button + .el-button {
  margin-left: 0;
}
</style>
